<template>
  <div class="pic">
    <el-dialog
        title="图片素材库"
        :visible.sync="dialog"
        width="60%"
        @close="handleClose"
    >
      <div class="main">
        <el-card class="box-card">
<!--          搜索功能框-->
<!--          图片列表框-->
          <el-row :gutter="10">
           <el-col :span="12">
             <div class="top">
               <el-input  v-model="title" placeholder="输入图片名字"></el-input>
               <el-button type="primary" class="btn" size="medium">查找图片</el-button>
             </div>
           </el-col>
          <el-col :span="8">
            <el-upload
                class="upload-demo"
                :action="`${host}/admin/xy/upload/uploadImg`"
                multiple
                :limit="3"
                :on-progress:="startUp"
                :on-success="upSuccess"
                :show-file-list="false"
            >
              <el-button size="medium" type="primary" :loading="showloding">
                <span v-show="showloding">上传中</span><span v-show="showloding">点击上传</span>
                点击上传
              </el-button>

            </el-upload>
          </el-col>
          <el-col :span="3">
            <div>
              <el-button class="stro" type="primary" icon="el-icon-folder">素材列表({{tempmater.length}})</el-button>
            </div>
          </el-col>
          </el-row>
<!--          图片列表-->

          <div class="piclist">
            <el-card class="box-card item" v-for="(item,index) in piclist" :key="index">

              <img class="imgs" :src="urlStr(item)" alt="">
              <div class="title">{{item.title}}</div>
              <div class="btns">
                <div v-show="texttyp == '0'">
                  <el-button class="add" type="primary" size="mini" @click="addMater(urlStr(item))">添加</el-button>
                </div>
                <div v-show="texttyp == '1' || texttyp == '0'">
                  <el-button type="primary" size="mini"
                             v-clipboard:copy="urlStr(item)"
                             v-clipboard:success="onCopy"
                  >复制</el-button>
                </div>
              </div>
            </el-card>
          </div>
        </el-card>
      </div>

      <!--    引入分页-->
      <page-nation :total="totals"  @changepage = "changepage" class="page"></page-nation>













      <span slot="footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleClose">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import pictureapi from '@/api/material/pictureapi'
import host from '@/settings'
//引入分页
import PageNation from '@/views/material/picture/pagnation/index'
export default {
name: "PictureStore",
  components:{
    PageNation
  },
  props:{
  texttyp:{
    type:String,
    default:function(){
      return ''
    }
  }
  },
data(){
return{
  showloding:false,
  host:host.host,
  dialog: false,
  tempPic:[],
  piclist:[],
  tempmater:[],
  start:1,
  totals:1,
  title:""
}

},
  computed:{
    urlStr(){
      return  function (str){
        return host.host+'/'+str.dir+'/'+str.fileName;
      }

    }
  },
methods:{
  changepage(val){
    console.log(val)
    this.start=val;
    this.getArealist()
  },




  openDialog() {
    this.dialog = true
  },
  handleClose() {
    this.dialog = false
    this.$emit("toText",this.tempmater)

      this.$parent.insertimg()

  },
  getArealist(){
    pictureapi.getList({
      start:this.start,
      limit:10
    })
    .then(res=>{

      this.piclist =res.data.list
      this.totals = res.data.totalRow
    })
  },

  // 开始上传的钩子
  startUp(){
    this.showloding=true;
  },
  // 上传成功的钩子函数
  upSuccess(response, file, fileList){
    this.showloding=false;
    // this.$refs.lists.getList()
    this.getArealist()
    this.$message('上传成功')

  },
  onCopy(){

    this.$message({
      message: '图片地址复制成功',
      type: 'success'
    });
  },
  //将图片添加到库
  addMater(val){
    this.tempmater.push(val)
    this.$message({
      message: '添加至仓库',
      type: 'success'
    });

  }
},
  created(){
this.getArealist()
  }
}
</script>

<style lang="scss" scoped>
  .pic{
  .main{
    .box-card{

      .top{
        display: flex;
        .btn{
          margin-left: 40px;
        }
        ::v-deep.stro{
          background-color: red;

        }
      }
      .piclist{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin-top: 20px;
        .item{
          width: 18%;
          margin-bottom: 10px;
          position: relative;
          height: 250px;
          .imgs{
            width: 100%;
            height: 180px;
          }
          .title{
            text-align: center;
          }
          .btns{
            position: absolute;
            margin-top: -80px;
            margin-left: 28px;
            .add{
              margin-bottom: 5px;
            }
            .el-button--primary{
              background-color: rgba(100,100,100,.8);
              border-color: #99a9bf;

            }
          }
        }
        }
      .page{
        margin-left: 200px;
      }
    }
  }
  }
</style>
